<template>
  <div class="wpwork-preview-main user-form">
    <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="起始时间：">
            <el-date-picker v-model="listQuery.startDate" type="datetime"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="截止时间：">
            <el-date-picker v-model="listQuery.endDate" type="datetime"
              placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{$t('common.search')}}</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
      <wpwork-table v-loading="listLoading" :data="tableData" :hasNO="false">
        <el-table-column prop="realName" label="人员名称" width="120" align="center" />
        <el-table-column prop="mobilePhone" label="终端号码" width="120" align="center" />
        <el-table-column prop="uploadTime" label="考勤时间" align="center"
          :formatter="wpwork.tableDateFormat" width="170" />
        <el-table-column prop="uploadTimes" label="预考勤时间段1" align="center" width="170" />
        <el-table-column prop="attendancePoints" label="考勤点" width="190" show-overflow-tooltip
          align="center" />
        <el-table-column prop="distanceError" label="距离误差" width="120" align="center" />
        <!-- <el-table-column prop="status" label="考勤状态" min-width="170"  align="center" /> -->
        <el-table-column label="考勤状态" align="center">
          <template slot-scope="scope">
            <span style="color: green;">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope" v-if="!scope.row.isAdministrator">
            <el-button size="mini" type="text" @click="resourceHandle(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </wpwork-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="initData" />
    </div>
    <info-dialog ref="infoDialog" @refresh="initData" />
  </div>
</template>

<script>
import { status } from 'nprogress'
import InfoDialog from './InfoDialog.vue'
export default {
  name: 'attendance',
  components: {
    InfoDialog
  },
  data() {
    return {
      tableData: [],
      listLoading: true,
      listQuery: {
        organizeId: '',
        keyword: '',
        gender: '',
        enabledMark: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 2,
    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    resourceHandle(row) {
      this.$refs.infoDialog.openDialog({
        imageUrls: row.imageUrls,
        uploadTime: row.uploadTime,
        realName: row.realName,
        attendancePoints: row.attendancePoints,
        distanceError: row.distanceError,
        status: row.status,
      });
    },
    initData() {
      this.listLoading = true
      this.tableData = [
        {
          "id": "1",
          "realName": "测试人员1",
          "mobilePhone": "13136599927",
          "uploadTimes": "14:50-15:00|15:00-15:10",
          "uploadTime": 1755500382000,
          "attendancePoints": "中国湖北省武汉市武昌区",
          "distanceError": "1000",
          "status": "已考勤",
          "imageUrls": [
            // require('@/assets/images/t1.png'),
            require('@/assets/images/t3.png'),
          ]
        },
        {
          "id": "2",
          "realName": "测试人员2",
          "mobilePhone": "19135293352",
          "uploadTimes": "11:00-11:20|11:10-11:30",
          "uploadTime": 1755572482000,
          "attendancePoints": "中国湖北省武汉市汉口区",
          "distanceError": "2000",
          "status": "已考勤",
          "imageUrls": [
            // require('@/assets/images/t4.png'),
            require('@/assets/images/t2.png'),
          ]
        },
      ]
      setTimeout(() => {
        this.listLoading = false
      }, 600)
    },
    reset() {
      this.listQuery.startDate = ''
      this.listQuery.endDate = ''
      this.initData()
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form {
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) {
  .user-form {
    margin-top: 98px;
  }
}
@media (max-width: 768px) {
  .user-form {
    margin-top: 168px;
  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>